<template>
  <q-dialog class="my_dialog" v-model="isFlagShow">
    <q-card class="my-card">
      <q-toolbar class="row items-center my_form_header">
        <div>
          {{dlgTitle}}
        </div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" @click="close"/>
      </q-toolbar>
      <q-separator />
      <q-card-setion class="q-mx-sm">
        <q-scroll-area class="my-form-container">
          <div class="row">
            <div class="col-md-6">
            <q-item class="items-center">
              <q-item-label>&nbsp;&nbsp;&nbsp;&nbsp;上级菜单：</q-item-label>
              <q-item-section>
                <q-input
                  outlined
                  dense
                  v-model="param.parent"
                  readonly
                >
                  <template v-slot:append>
                    <q-icon name="mdi-magnify-plus" />
                  </template>
                </q-input>
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>菜单名称：</q-item-label>
              <q-item-section>
                <q-input
                  outlined
                  dense
                  v-model="param.label"
                  @blur="v$.label.$touch()"
                  :error="v$.label.$error"
                  error-message="请输入不少于2个字符！"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
                <q-item-label><span style="color: red">**</span>菜单图标：</q-item-label>
                <q-item-section>
                  <AmyIconSelect
                    :icon-arr="iconArr"
                    :current-icon="param.icon"
                    @update="refreshIcon"
                  />
                </q-item-section>
              </q-item>
            <q-item class="items-center">
              <q-item-label>&nbsp;&nbsp;&nbsp;&nbsp;菜单路由：</q-item-label>
              <q-item-section>
                <q-input
                  dense
                  outlined
                  v-model="param.url"
                />
              </q-item-section>
            </q-item>
              <q-item class="items-center">
                <q-item-label>&nbsp;&nbsp;&nbsp;&nbsp;菜单范围：</q-item-label>
                <q-item-section>
                  <q-input
                    dense
                    outlined
                    type="number"
                    @blur="v$.privilege.$touch()"
                    :error="v$.privilege.$error"
                    v-model="param.privilege"
                    error-message="该值在1~3之间！"
                  />
                </q-item-section>
              </q-item>
          </div>
            <div class="col-md-6">
              <q-item class="items-center">
                <q-item-label><span style="color: red">**</span>菜单类型：</q-item-label>
                <q-item-section>
                  <q-select
                    class="my-select-box"
                    dense
                    outlined
                    options-dense
                    clearable
                    :options="menuTypeArr"
                    option-value="label"
                    emit-value
                    options-selected-class="teal"
                    v-model="param.type"
                  />
                </q-item-section>
              </q-item>
              <q-item class="items-center">
                <q-item-label><span style="color: red">**</span>菜单编码：</q-item-label>
                <q-item-section>
                  <q-input
                    dense
                    outlined
                    v-model="param.value"
                    @blur="v$.value.$touch()"
                    :error="v$.value.$error"
                    error-message="请输入不少于1个字符！"
                  />
                </q-item-section>
              </q-item>
              <q-item class="items-center">
                <q-item-label><span style="color: red">**</span>菜单序码：</q-item-label>
                <q-item-section>
                  <q-input
                    dense
                    outlined
                    v-model="param.sortCode"
                    @blur="v$.sortCode.$touch()"
                    :error="v$.sortCode.$error"
                    error-message="请输入不少于1个字符！"
                  />
                </q-item-section>
              </q-item>
              <q-item class="items-center">
                <q-item-label>&nbsp;&nbsp;&nbsp;&nbsp;菜单组件：</q-item-label>
                <q-item-section>
                  <q-input
                    dense
                    outlined
                    v-model="param.component"
                  />
                </q-item-section>
              </q-item>
            </div>
          </div>
        </q-scroll-area>
      </q-card-setion>
      <q-separator />
      <div class="q-gutter-sm my_form_footer">
        <q-btn
          unelevated
          dense
          label="提交"
          type="submit"
          color="teal-3"
          @click="onSubmit"
          style="width: 80px"
        />
        <q-btn
          unelevated
          dense
          label="重置"
          type="reset"
          color="orange-3"
          @click="onReset"
          style="width: 80px"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRefs, PropType, watch, toRef, defineAsyncComponent } from 'vue';
import { isObjectEmpty } from '../../../util/utils';
import { required, minLength } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core';
import { cataItem } from '../../../hook/common/useCatalogType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';

import { MenuItem, MenuItemVO } from './MenuModel';
const AmyIconSelect = defineAsyncComponent(() => import('components/basic/AmyIconSelect.vue'));


export default defineComponent({
  name: 'MenuDlg',
  components: {
    AmyIconSelect
  },
  props: {
    itemData: {
      type: Object as PropType<MenuItem>,
      required: true
    },

    menuTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    },
    menuArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    },
    iconArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    }
  },
  emits: ['submit-menu-item', 'cancel-menu-item'],
  setup (props, context) {
    //数据解构
    const {
      itemData,
      menuTypeArr,
      menuArr,
      iconArr
    } = toRefs(props);

    //*******************************
    //      目录操作
    //*******************************
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    //*******************************
    //      表单项
    //*******************************
    //窗口显示
    let isFlagShow = ref(false);

    //窗口标题
    let dlgTitle = ref('');

    //界面数据
    let param = ref<MenuItemVO>({
      id: 0,
      parent: '',
      label: '',
      value: '',
      icon: '',
      url: '',
      component: '',
      type: '',
      privilege: 0,
      sortCode: '',
      operation: ''
    });

    //关闭窗口
    const close = () => {
      isFlagShow.value = false;
      context.emit('cancel-menu-item');
    }

    //显示窗口
    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    }

    //提交窗口
    const onSubmit = () => {
      v$.value.$validate();
      if (v$.value.$error) {
        alert('输入参数校验错误!');
      } else {
        isFlagShow.value = false;
        let id = findCatalogId(menuArr.value, param.value.parent);
        id = (id === -1) ? 0 : id;
        let item: MenuItem = {
          id: param.value.id,
          pid: id,
          label: param.value.label,
          value: param.value.value,
          icon: param.value.icon,
          url: param.value.url,
          component: param.value.component,
          menuType: findCatalogId(menuTypeArr.value, param.value.type),
          privilege: param.value.privilege,
          sortCode: param.value.sortCode,
          operation: param.value.operation,
          createTime: '',
          createUserId: 0,
          updateTime: '',
          updateUserId: 0
        };

        //发送消息
        context.emit('submit-menu-item', item);
      }
    }

    //重置
    const onReset = () => {
      if (param.value) {
        param.value.id = 0;
        param.value.parent = '';
        param.value.label = '';
        param.value.value = '';
        param.value.icon = '';
        param.value.url = '';
        param.value.component = '';
        param.value.privilege = 0;
        param.value.type = '';
        param.value.sortCode = '';
        param.value.operation = '';
      }

      //表单验证初始化
      v$.value.$reset();
    }

    //更新图标
    const refreshIcon = (icon: string) => {
      param.value.icon = icon;
    }

    //*******************************
    //      表单校验
    //*******************************
    //配置校验规则
    const rules = {
      id: {},
      parent: {},
      label: { required, minLength: minLength(1) },
      value: { required, minLength: minLength(1) },
      icon: { required },
      url: {},
      component: {},
      type: { required },
      privilege: { required, min: 1, max: 3 },
      sortCode: { required },
      operation: {}
    }

    //使用vuelidate，建立变量对应的校验规则
    const v$ = useVuelidate(rules, {
      id: toRef(param.value, 'id'),
      parent: toRef(param.value, 'parent'),
      label: toRef(param.value, 'label'),
      value: toRef(param.value, 'value'),
      icon: toRef(param.value, 'icon'),
      url: toRef(param.value, 'url'),
      component: toRef(param.value, 'component'),
      type: toRef(param.value, 'type'),
      privilege: toRef(param.value, 'privilege'),
      sortCode: toRef(param.value, 'sortCode'),
      operation: toRef(param.value, 'operation')
    });



    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {
      if (!isObjectEmpty(itemData.value)) {
        param.value.id = itemData.value.id;
        param.value.parent = findCatalogLabel(menuArr.value, itemData.value.pid);
        param.value.label = itemData.value.label;
        param.value.value = itemData.value.value;
        param.value.icon = itemData.value.icon;
        param.value.url = itemData.value.url;
        param.value.component = itemData.value.component;
        param.value.type = findCatalogLabel(menuTypeArr.value, itemData.value.menuType);
        param.value.privilege = itemData.value.privilege;
        param.value.sortCode = itemData.value.sortCode;
        param.value.operation = itemData.value.operation;
      }

      //表单验证初始化
      v$.value.$reset();
    }

    //监听对象的所有属性
    watch(() => itemData, () => {
      init();
    }, { deep: true });

    //启动挂载组件
    onMounted(() => {
      init();
    })

    return {
      itemData,
      menuTypeArr,
      iconArr,

      isFlagShow,
      dlgTitle,
      param,
      init,
      close,
      show,
      onSubmit,
      onReset,
      refreshIcon,

      v$
    }
  }
})
</script>

<style lang="scss" scoped>
.my-card {
  alignment: center;
  width: 850px;
  max-width: 900px;

  .my-form-container {
    text-align: center;
    padding: 5px 50px 5px 50px;
    height: 300px;

    .my-select-box {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

</style>
